<template>
  <!-- 空间查询组件 -->
  <div class="element_box" v-show="showQuery">
    <!-- <div v-show="showBtn">
      <div :class="imgStyle" @click="toggleCollapse()">
        <img src="@/assets/images/亮色风格图集/向右.png" alt="" />
      </div>
    </div> -->
    <!-- 统计图 250px/240px-->
    <div class="chartMove" v-show="showEchart">
      <div
        id="myChart123"
        ref="myChart123"
        style="height: 210px; width: 270px"
      ></div>
    </div>
    <transition name="fade">
      <div class="SpatialQuery_box" v-if="isCollapse">
        <div class="detect_box_title">空间查询</div>
        <div class="close_btn" @click="closeQuery">×</div>
        <div class="element_box_search">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="拉框进行空间查询"
            size="large"
            @change="drawChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div class="search" @click="submitSearch" title="空间查询">
            <img src="@/assets/images/亮色风格图集/查询子目和材料.png" alt="" />
          </div>
          <div class="delete" @click="delLocation" title="清空画布">
            <img src="@/assets/images/亮色风格图集/编组28.png" alt="" />
          </div>
          <div :class="loading">
            <img src="@/assets/images/loading.gif" />
          </div>
        </div>
        <div v-show="showALL" class="SpatialQuery_box_2">
          <div class="tree_scroll">
            <el-tree
              :data="data"
              :props="defaultProps"
              :indent="10"
              @node-click="handleNodeClick"
            />
          </div>
          <div>
            <div>
              <div class="title_b">统计信息</div>
              <div style="height: 220px; overflow: hidden">
                <el-table
                  :data="tableDataTJXX"
                  style="width: 232px; height: 220px; overflow: hidden"
                  :header-cell-style="{
                    background: '#f1eeff',
                    'text-align': 'center',
                  }"
                  :cell-style="{ 'text-align': 'center' }"
                  :row-style="{ height: 28 + 'px' }"
                >
                  <el-table-column prop="id" label="序号" width="50" />
                  <el-table-column prop="type" label="类别名称" width="95">
                    <template #default="scope">
                      <span
                        style="
                          color: #47aefc;
                          font-weight: bolder;
                          font-size: 13px;
                        "
                      >
                        {{ scope.row.type }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="合计"
                    width="87"
                    :show-overflow-tooltip="true"
                  />
                </el-table>
              </div>
            </div>
            <div class="title_b2">
              <div class="title_b3">统计图</div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import { onMounted, ref, toRaw, defineComponent, reactive, watch } from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import {
  getJCGLInfo,
  getJCGLSearch,
  getJCWhole,
  getXFSearch,
  getXFInfo,
  getSpatialInfo,
  getPipePointInfo,
  getPipeInfo,
} from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElEmpty, ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
import { message } from 'ant-design-vue'
//测试用菠萝存储地图容器
import {
  userMap,
  mapStyle,
  popValue,
  switchList3,
  switchList5,
  switchList12,
} from '@/store/index'
let map = userMap() //接收
let storeStyle = mapStyle() //接受样式
let storePop = popValue() //接收map.vue弹窗内容
let storeSwitch = switchList3()
let switchOpinion
let list
let switchStyle
let pointAt
let lineAt
// 空间查询图层--绘制
let drawLayerSearch
let drawSourceSearch
let drawFeatureSearch
let drawSearch
// 空间查询树控件飞行图层-点
let treePiontLayer
let treePiontSource
let treePiontFeature
// 空间查询树控件飞行图层-线
let treeLineLayer
let treeLineSource
let treeLineFeature
// 单线起点
let PipeXsource
let PipeXLayer
let PipeXFeature
// 单线终点
let PipeYsource
let PipeYLayer
let PipeYFeature
// 单线缓冲区
let PipeLinesource
let PipeLineLayer
let PipeLineFeature
// 时间内全部管线
let Pipesource
let PipeLayer
let PipeFeature
// 空间查询绘制部分探测图层
let QLinesource
let QLineLayer
let QLineFeature
// 空间查询整体表单显影
const showQuery = ref(false)
// 控制空间查询显隐
let storeSpatial = switchList5()
let changeSpatial
let storeCYGN = switchList12()
watch(storeSpatial, () => {
  changeSpatial = toRaw(storeSpatial.queryBtn)
  if (changeSpatial == true) {
    showQuery.value = true
    storeCYGN.queryBtn = false
  } else {
    showQuery.value = false
    delLocation()
  }
})

const closeQuery = () => {
  showQuery.value = false
  storeSpatial.queryBtn = false
  delLocation()
}
// 空间查询折叠表单(横向)
const isCollapse = ref(true)
const btnStatus = ref(false)
const imgStyle = ref({
  go: false,
  aa: true,
  gotop: false,
})
const showEchart = ref(true)
// watch(
//   storeSwitch,
//   () => {
//     switchOpinion = toRaw(storeSwitch.opinionBtn)
//     if (switchOpinion == true) {
//       btnStatus.value = true
//       showBtn.value = true
//       toggleCollapse()
//       imgStyle.value = {
//         go: false,
//         aa: false,
//         gotop: true,
//       }
//       storeSwitch.opinionBtn = false
//     } else {
//       console.log('switchOpinion', switchOpinion)
//     }
//   },
//   {
//     immediate: true,
//   }
// )
const toggleCollapse = () => {
  if (isCollapse.value == true) {
    isCollapse.value = false
    showEchart.value = false
    storeSwitch.operationSwitch = isCollapse.value
    if (btnStatus.value == true) {
      imgStyle.value = {
        go: false,
        aa: false,
        gotop: true,
        aatop: false,
      }
    } else {
      imgStyle.value = {
        go: true,
        aa: false,
      }
    }
  } else {
    isCollapse.value = true
    showEchart.value = true
    storeSwitch.operationSwitch = isCollapse.value
    if (btnStatus.value == true) {
      imgStyle.value = {
        go: false,
        aa: false,
        gotop: false,
        aatop: true,
      }
    } else {
      imgStyle.value = {
        go: false,
        aa: true,
      }
    }
  }
}

// 空间查询折叠纵向
const showALL = ref(false)
const showBtn = ref(false)

onMounted(() => {
  list = toRaw(map.map)
  switchStyle = toRaw(storeStyle.map_style)
  storeSwitch.operationSwitch = isCollapse.value
  // console.log('获取样式', switchStyle)
  // 空间查询图层--绘制
  drawSourceSearch = new VectorSource({
    wrapX: false,
  })
  drawLayerSearch = new VectorLayer({
    source: drawSourceSearch,
    style: {
      'fill-color': '#365d8d33',
      'stroke-color': '#365d8d',
      'stroke-width': 2,
      'circle-radius': 7,
      'circle-fill-color': '#365d8d',
    },
  })
  list.addLayer(drawLayerSearch)
  // 空间查询图层--飞行--单点
  treePiontSource = new VectorSource({
    wrapX: false,
  })
  treePiontLayer = new VectorLayer({
    source: treePiontSource,
    zIndex: 9999,
  })
  list.addLayer(treePiontLayer)
  // 空间查询图层--飞行--线
  treeLineSource = new VectorSource({
    wrapX: false,
  })
  treeLineLayer = new VectorLayer({
    source: treeLineSource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 4,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(treeLineLayer)
  // 线要素的起点图层
  PipeXsource = new VectorSource({
    wrapX: false,
  })
  PipeXLayer = new VectorLayer({
    source: PipeXsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: [255, 165, 0, 1],
        }),
        stroke: new Stroke({
          color: [0, 255, 0, 1],
          width: 2.5,
        }),
      }),
      text: new Text({
        font: '15px A_QiChengINFO',
        text: '\u0028',
        scale: 2,
        // scale: list.getView().getZoom() / 5,
        fill: new Fill({
          color: 'rgba(255,165,0,1)',
        }),
      }),
    }),
  })
  list.addLayer(PipeXLayer)
  // 线要素的终点图层
  PipeYsource = new VectorSource({
    wrapX: false,
  })
  PipeYLayer = new VectorLayer({
    source: PipeYsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: [0, 255, 0, 1],
        }),
        stroke: new Stroke({
          color: [255, 165, 0, 1],
          width: 2.5,
        }),
      }),
      text: new Text({
        font: '15px A_QiChengINFO  ',
        text: '\u0029',
        scale: 2,
        fill: new Fill({
          color: 'rgba(255,165,0,1)',
        }),
      }),
    }),
  })
  list.addLayer(PipeYLayer)
  // 线要素缓冲区图层(单线)
  PipeLinesource = new VectorSource({
    wrapX: false,
  })
  PipeLineLayer = new VectorLayer({
    source: PipeLinesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      // stroke: new Stroke({
      //   color: [0, 0, 0, 1],
      //   width: 5,
      // }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLineLayer)
  // 全部图层的显隐
  Pipesource = new VectorSource({
    wrapX: false,
  })
  PipeLayer = new VectorLayer({
    source: Pipesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 3,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLayer)
  // 空间查询绘制部分探测图层
  QLinesource = new VectorSource({
    wrapX: false,
  })
  QLineLayer = new VectorLayer({
    source: QLinesource,
    title: 'QLineLayer',
  })
  list.addLayer(QLineLayer)
})

// 空间查询
const demo3 = reactive({
  value1: false, //弹窗
})
const value = ref('')
const options = [
  {
    value: 'Polygon',
    label: '规则多边形',
  },
  {
    value: 'handDraw',
    label: '手绘多边形',
  },
  {
    value: 'None',
    label: '清空交互',
  },
]
const choose = ref('')
// 空间查询选择切换
const drawChange = (val) => {
  choose.value = val
  console.log(choose.value)
  delLocation() //先清空再添加新的
  addInteraction()
}
// 空间查询清空交互
const delSearch = () => {
  list.removeInteraction(drawSearch)
  drawSourceSearch.clear()
}
// 空间查询清空画布
const delLocation = () => {
  const arr = list.getLayers().getArray()
  for (let i = 0; i < arr.length; i++) {
    if (
      arr[i].values_.title != 'GeoJSON' &&
      arr[i].className_ != 'myTdt' &&
      arr[i].className_ != 'HJLayer'
    ) {
      arr[i].getSource().clear()
    }
  }
  delSearch()
  // QLinesource.clear()
  // PipeXsource.clear()
  // const stArr = treeLineLayer.getSource().getFeatures().length
  // const ptArr = treePiontLayer.getSource().getFeatures().length
  // console.log('进入清除')
  // //当有交互图层的时候,清除画布
  // if (stArr >= 1) {
  //   treeLineSource.clear()
  //   delSearch()
  //   console.log('清除线')
  // } else if (ptArr >= 1) {
  //   treePiontSource.clear()
  //   delSearch()
  //   console.log('清除点')
  // } else {
  //   delSearch()
  //   console.log('未绘制图层')
  // }
}
// 空间查询添加画笔交互
const addInteraction = () => {
  if (choose.value !== 'None') {
    if (choose.value == 'handDraw') {
      delLocation()
      drawSearch = new Draw({
        source: drawSourceSearch,
        type: 'Polygon',
        freehand: true,
      })
    } else {
      delLocation()
      drawSearch = new Draw({
        source: drawSourceSearch,
        type: 'Polygon',
      })
    }
    list.addInteraction(drawSearch)
    // 监听开始绘制时清空上一次要素
    drawSearch.on('drawstart', (evt) => {
      drawSourceSearch.clear()
    })
  } else {
    // 清空交互
    list.removeInteraction(drawSearch)
    drawSourceSearch.clear()
  }
}
// 空间查询提交坐标组进行查询
let tableDataTJXX
const data = ref([]) //树形控件定义
let defaultProps = {
  children: 'children',
  label: 'label',
}
// loading
const loading = ref({
  loading_search: false,
  loading_search_a: true,
})
const submitSearch = () => {
  loading.value = {
    loading_search: true,
    loading_search_a: false,
  }
  const arr555 = list.getLayers().getArray()
  // console.log('获取是否存在探测', arr555)
  for (let i = 0; i < arr555.length; i++) {
    // console.log(arr555[i].values_.title)
    if (arr555[i].values_.title == 'SGLayer') {
      // console.log(arr555[i].getSource().getFeatures())
      const layerValue = arr555[i].getSource().getFeatures()
      // if (layerValue.length >= 1) {
      if (drawLayerSearch.getSource().getFeatures().length >= 1) {
        const featuresSearch = drawLayerSearch.getSource().getFeatures()
        const coordinates = featuresSearch[0].getGeometry().getCoordinates()
        const type = featuresSearch[0].getGeometry().getType()
        // console.log('坐标组查询', type, coordinates[0])
        const a10 = coordinates[0]
        const a11 = []
        for (let i = 0; i < a10.length; i++) {
          const obj = { x: a10[i][0], y: a10[i][1] }
          a11.push(obj)
        }
        // console.log('空间查询数组', a11)
        // const params = [
        //   {
        //     x: 26558.791350168436,
        //     y: 74921.18460379374,
        //   },
        // ]
        const params = a11
        // console.log('传参', a11)
        getSpatialInfo(params).then((res) => {
          console.log('空间查询源数据', res.data)
          loading.value = {
            loading_search: false,
            loading_search_a: true,
          }
          if (res.data.length >= 1 && res.data != undefined) {
            // 使用源数据绘制探测图层
            const serveData_ = res.data
            console.log('serveData_', serveData_)
            list.getView().setResolution(2.6458386250105836)
            list
              .getView()
              .setCenter([
                serveData_[0].featIds[0].startX,
                serveData_[0].featIds[0].startY,
              ])
            for (let i = 0; i < serveData_.length; i++) {
              const featid = serveData_[i].featIds[0].featId
              const featArr = serveData_[i].featIds
              const featType = serveData_[i].type
              /* 判断点线要素--根据是否含有短横线来判断 */
              if (featid.includes('-') == true && featid != undefined) {
                // 线要素
                // console.log('绘制空间查询线要素', featArr, featid)
                const serveData = featArr
                // const arr1 = [serveData[i].startX, serveData[i].startY]
                //   const arr2 = [serveData[i].endX, serveData[i].endY]
                //   const arr3 = [serveData[i].startId, serveData[i].endId]
                //   const id1 = [serveData[i].startId]
                //   const id1Type = [serveData[i].startType]
                //   const id2 = [serveData[i].endId]
                //   const id2Type = [serveData[i].endType]
                for (let i = 0; i < serveData.length; i++) {
                  const arr1 = [serveData[i].startX, serveData[i].startY]
                  const arr2 = [serveData[i].endX, serveData[i].endY]
                  const str = serveData[i].featId
                  const str2 = str.substring(0, str.indexOf('-'))
                  const str3 = str.substring(str.indexOf('-') + 1, str.length)
                  // console.log(str, str2, str3)
                  const arr3 = [str2, str3]

                  QLineFeature = new Feature({
                    geometry: new LineString([arr1, arr2]),
                    attributes: arr3,
                    attributes2: str,
                    PointAX: arr1,
                    PointX: arr2,
                    layerName: 'QLineLayer',
                  })
                  // 按雨污进行管子颜色划分
                  if (featType == '雨水管') {
                    QLineFeature.setStyle(
                      new Style({
                        stroke: new Stroke({
                          color: 'rgba(22, 92, 177,1)',
                          width: 1.5,
                        }),
                      })
                    )
                  } else if (featType == '污水管') {
                    QLineFeature.setStyle(
                      new Style({
                        stroke: new Stroke({
                          color: [135, 99, 27, 1],
                          width: 1.5,
                        }),
                      })
                    )
                  } else {
                    //其他管子
                    QLineFeature.setStyle(
                      new Style({
                        stroke: new Stroke({
                          color: [0, 0, 0, 1],
                          width: 1.5,
                        }),
                      })
                    )
                  }
                  QLinesource.addFeature(QLineFeature)
                }
              } else if (featid.includes('-') == false && featid != undefined) {
                // 点要素
                const serveData = featArr
                for (let i = 0; i < serveData.length; i++) {
                  // console.log('绘制空间查询点要素', serveData[i])
                  const arr1 = [serveData[i].startX, serveData[i].startY]
                  const str = serveData[i].featId
                  // const str2 = str.substring(0, str.indexOf('-'))
                  const id1 = [str]

                  // 加载水管管点信息--单点
                  PipeXFeature = new Feature({
                    geometry: new Point(arr1),
                    attributes: id1,
                    layerName: 'QLineLayer',
                  })
                  PipeXsource.addFeature(PipeXFeature)
                  PipeXFeature.setStyle(function (resolution) {
                    //监听分辨率跟随地图缩放
                    if (featType == '雨水井') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水井.png'),
                            src: require('/vue3Ol/images/雨水井.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '雨篦') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨篦.png'),
                            src: require('/vue3Ol/images/雨篦.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '雨水进水口') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水进水口.png'),
                            src: require('/vue3Ol/images/雨水进水口.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '雨水排放口') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水排放口.png'),
                            src: require('/vue3Ol/images/雨水排放口.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '雨水预留口') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水排放口.png'),
                            src: require('/vue3Ol/images/雨水预留口.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '雨水阀门') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水阀门.png'),
                            src: require('/vue3Ol/images/雨水阀门.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水井') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污水井.png'),
                            src: require('/vue3Ol/images/污水井.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污篦') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污篦.png'),
                            src: require('/vue3Ol/images/污篦.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '化粪池') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/化粪池.png'),
                            src: require('/vue3Ol/images/化粪池.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水进水口') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污水进水口.png'),
                            src: require('/vue3Ol/images/污水进水口.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水排放口') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污水排放口.png'),
                            src: require('/vue3Ol/images/污水排放口.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水预留口') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水排放口.png'),
                            src: require('/vue3Ol/images/污水预留口.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水泵站') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污水泵站.png'),
                            src: require('/vue3Ol/images/污水泵站.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水调蓄') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污水调蓄.png'),
                            src: require('/vue3Ol/images/污水调蓄.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '污水阀门') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/污水阀门.png'),
                            src: require('/vue3Ol/images/污水阀门.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '阀门') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/雨水排放口.png'),
                            src: require('/vue3Ol/images/阀门.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '探测点') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/探测点.png'),
                            src: require('/vue3Ol/images/探测点.png'),
                          }),
                        }),
                      ]
                    } else if (featType == '雨水调蓄设施') {
                      return [
                        new Style({
                          image: new Icon({
                            anchor: [0.5, 0.6], //锚点
                            opacity: 1,
                            scale: list.getView().getZoom() / 13,
                            // src: require('@/assets/images/图例/探测点.png'),
                            src: require('/vue3Ol/images/雨水调蓄设施.png'),
                          }),
                        }),
                      ]
                    } else {
                      //其他--外黑内蓝原点
                      return [
                        new Style({
                          image: new Circle({
                            radius: list.getView().getZoom() / 3,
                            fill: new Fill({
                              color: [25, 159, 255, 1],
                            }),
                            offsetX: 0,
                            offsetY: 2, //调整相对位置
                            stroke: new Stroke({
                              color: [30, 30, 30, 1],
                            }),
                          }),
                        }),
                      ]
                    }
                  })
                }
              } else {
                console.log(serveData_[i])
              }
            }
            /* 分割线 */
            // 统计图
            const a13 = []
            for (let i = 0; i < res.data.length; i++) {
              const obj = { value: res.data[i].count, name: res.data[i].type }
              a13.push(obj)
            }
            const arrName = []
            a13.forEach((el) => {
              arrName.push(el.name)
            })
            // 如果数组中有污水管就把污水管排在第三个
            if (arrName.indexOf('污水管') > -1) {
              const filterArr = a13.splice(arrName.indexOf('污水管'), 1)
              a13.splice(2, 0, filterArr[0])
            }
            echartBug.value = a13
            echart()
            // 空间查询--侧边栏aside--tree树形控件
            const a12 = res.data
            const a14 = []
            for (let i = 0; i < a12.length; i++) {
              const a15 = []
              const a16 = a12[i].featIds
              for (let i = 0; i < a16.length; i++) {
                const obj = { label: a16[i].featId, children: [] }
                a15.push(obj)
              }
              // console.log('树形控件子级', a15)
              const obj = {
                label: a12[i].type + '(' + a15.length + ')',
                children: a15,
                type: a12[i].type,
              }
              a14.push(obj)
            }
            // 分割线
            // const arrName6 = []
            // a14.forEach((el) => {
            //   arrName6.push(el.type)
            // })
            // if (arrName6.indexOf('污水管') > -1) {
            //   const filterArr = a14.splice(arrName6.indexOf('污水管'), 1)
            //   a14.splice(2, 0, filterArr[0])
            // }
            data.value = a14
            console.log('树结构', a14)
            // 空间查询--mian栏--统计信息
            // tableDataTJXX = [
            //   {
            //     type: '雨水井',
            //     count: '580',
            //   },
            // ]
            const arrName2 = []
            a12.forEach((el) => {
              arrName2.push(el.type)
            })
            // 如果有雨篦就放在第一个
            if (arrName2.indexOf('雨篦') > -1) {
              const filterArr = a12.splice(arrName2.indexOf('雨篦'), 1)
              // console.log('filterArr', filterArr)
              a12.splice(0, 0, filterArr[0])
            }

            const arrName4 = []
            a12.forEach((el) => {
              arrName4.push(el.type)
            })
            if (arrName4.indexOf('污水管') > -1) {
              const filterArr = a12.splice(arrName4.indexOf('污水管'), 1)
              // console.log('污水管', filterArr[0].totalLength)
              const obj = {
                type: '污水管',
                count: filterArr[0].totalLength.toFixed(2) + 'm',
              }
              a12.push(obj)
            }
            const arrName5 = []
            a12.forEach((el) => {
              arrName5.push(el.type)
            })
            if (arrName5.indexOf('雨水管') > -1) {
              const filterArr = a12.splice(arrName5.indexOf('雨水管'), 1)
              // console.log('雨水管', filterArr[0].totalLength)
              const obj = {
                type: '雨水管',
                count: filterArr[0].totalLength.toFixed(2) + 'm',
              }
              a12.splice(2, 0, obj)
              // a12.push(obj)
            }

            a12.forEach((item, index) => {
              item['id'] = index + 1
              // console.log(item)
            })

            tableDataTJXX = a12

            // 展开菜单
            showALL.value = true
            showBtn.value = true
            showEchart.value = true
            btnStatus.value = false
            imgStyle.value = {
              go: false,
              aa: true,
              aatop: false,
              gotop: false,
            }
          } else {
            showALL.value = false
            showBtn.value = false
            showEchart.value = false
            message.error('区域内无数据')
          }
        })
        list.removeInteraction(drawSearch) //清除交互
      } else {
        console.log('暂无数据')
        message.error('区域内无数据')
        showALL.value = false
        showBtn.value = false
        showEchart.value = false
      }
      // } else {
      //   message.error('请先展开测绘图层')
      // }
    }
  }
}

// 分割线
const echartBug = ref()
const startX = ref()
const startY = ref()
const endX = ref()
const endY = ref()
// const lineArr = []
const lineArr = ref([])
const test = ref([])
const dataTree = ref()
// 树形控件点击事件--点击后飞行并显示样式
const handleNodeClick = (data) => {
  delSearch()
  const treeArr = toRaw(data)
  // console.log('树点击', treeArr)
  if (treeArr.label.length < 8) {
    // console.log('没有点击要素编码不飞行')
  } else {
    if (treeArr.label.length > 14) {
      // 飞行到线
      getPipeInfo(treeArr.label).then((res) => {
        const arr = res.data[0]
        dataTree.value = arr
        getPipePointInfo(arr.startId).then((res) => {
          startX.value = res.data[0].x
          startY.value = res.data[0].y
          lineArr.value = [startX.value, startY.value]
          getPipePointInfo(arr.endId).then((res) => {
            endX.value = res.data[0].x
            endY.value = res.data[0].y
            const a = toRaw(dataTree.value)
            const a18 = toRaw(lineArr.value)
            const a19 = [endX.value, endY.value]
            // console.log('当前坐标', [a18, a19])
            treeLineFeature = new Feature({
              geometry: new LineString([a18, a19]),
              attributes: [[a.startId], [a.endId]],
            })
            // 点击下一线时清空上一线高亮
            if (treeLineFeature.getGeometry() != null) {
              treeLineSource.clear()
            }
            treeLineSource.addFeature(treeLineFeature)
            // const Search = treeLineSource.getFeatures()
            // console.log('当前线要素个数', Search.length)
            // 激活线弹窗
            storePop.lineValue = dataTree.value
            // console.log('线弹窗内容', dataTree.value)
            list.getOverlays().array_[1].setPosition(undefined)
            list.getOverlays().array_[0].setPosition(a18)

            list.getView().animate({
              center: a19,
              zoom: 10,
            })
          })
        })

        // 空间查询--mian栏--详细信息
      })
    } else {
      // console.log('飞行到点', treeArr.label)
      getPipePointInfo(treeArr.label).then((res) => {
        if (res.data.length > 0) {
          const arr = res.data[0]
          console.log('空间查询打印点', arr)
          // 空间查询--mian栏--详细信息
          treePiontFeature = new Feature({
            geometry: new Point([arr.x, arr.y]),
            attributes: arr.featId,
          })
          storePop.pointValue = arr
          list.getOverlays().array_[0].setPosition(undefined)
          list.getOverlays().array_[1].setPosition([arr.x, arr.y])
          // console.log('获取点弹窗', arr)
          // 点击下一点时清空上一点标注
          if (treePiontFeature.getGeometry() != null) {
            treePiontSource.clear()
          }
          treePiontSource.addFeature(treePiontFeature)
          treePiontFeature.setStyle(function (resolution) {
            //监听分辨率跟随地图缩放
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 1.2], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 22,
                  // src: require('@/assets/images/mark.png'),
                  src: require('/vue3Ol/images/mark.png'),
                }),
              }),
            ]
          })
          // 飞行
          // console.log('飞行点', [arr.x, arr.y])
          list.getView().animate({
            center: [arr.x, arr.y],
            zoom: 10,
          })
          // list.getView().setCenter([arr.x, arr.y])
        }
      })
    }
  }
}
let myChart
let option
const myChart123 = ref(null)
// 空间查询--mian栏--统计图
const echart = () => {
  // const command_edom = document.getElementById('myChart123')
  // command_edom.removeAttribute('_echarts_instance_')
  // myChart = echarts.init(document.getElementById('myChart123'))
  echarts.init(myChart123.value).clear() // 销毁实例
  myChart = echarts.init(myChart123.value)
  // 绘制图表
  myChart.setOption({
    // title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center',
    // },
    tooltip: {
      trigger: 'item',
    },
    // 配置颜色
    color: [
      '#82cfee', //雨水管
      '#6d93ff', //雨水井
      '#f6c638', //污水管
      '#feaa66', //污水井
      '#7d8fb3', //雨篦
      '#72ddb2',
      '#ea7d64',
      '#a184d1',
      '#45a8a7',
      '#9580ff',
    ],
    // 图例配置项
    legend: {
      orient: 'vertical', //纵向
      //图例位置
      top: 0,
      right: 5,
      // y: 'center',
      align: 'left', //图例在文字的左边
      itemHeight: 8, //图例大小
      itemGap: 9, //图例间距
      icon: 'circle', //圆形图例
      // 文字样式
      textStyle: {
        // fontSize: 12,
        color: '#929292',
        padding: [10, 0, 0, 0],
      },
      /* 分割线 */
      type: 'scroll',
      pageIconColor: '#47aefc', //图例分页左右箭头图标颜色
      pageTextStyle: {
        color: '#80eeff', //图例分页页码的颜色设置
      },
      pageIconSize: 12, //当然就是按钮的大小
      pageIconInactiveColor: '#47aefcbe', // 禁用的按钮颜色
    },
    series: [
      {
        type: 'pie',
        center: ['38%', '45%'],
        radius: '53%',
        // data: [
        //   { value: 484, name: '雨水管' },
        //   { value: 1048, name: '污水排放口' },
        // ],
        // 去掉引导线
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: echartBug.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
  window.onresize = function () {
    // 自适应大小
    myChart.resize()
  }
  // option = myChart.getOption()
}
</script>
<style lang="less" scoped>
.SpatialQuery_box {
  width: 370px;
  height: 108px;
}
.SpatialQuery_box_2 {
  display: flex;
  height: 467px;
  background: #fff;
  position: relative;
  z-index: 2;
}
// 空间查询进度转圈
.loading_search {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  img {
    height: 100%;
    width: 100%;
  }
}
.loading_search_a {
  display: none;
}
// 隐藏菜单
.close_btn {
  color: #fff;
  position: absolute;
  font-size: 40px;
  right: 5px;
  top: -13px;
  cursor: pointer;
}
// 折叠菜单
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  transform: translateX(-370px);
}
.chartMove {
  width: 270px;
  height: 205px;
  position: absolute;
  left: 100px;
  top: 365px;
  opacity: 1;
  z-index: 3;
  // padding-top: 20px;
  // color: #47aefcbe;
}

// 旋转按钮
.aa {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.aa img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.go {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.go img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}
.aatop {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 30px;
  cursor: pointer;
}
.aatop img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.gotop {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 30px;
  cursor: pointer;
}
.gotop img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}
// 折叠空间查询树
.tree_scroll {
  // margin-right: 5px;
  :deep(.el-tree-node__content > .el-tree-node__expand-icon) {
    padding: 6px 4px 6px 0;
  }
  :deep(.el-tree) {
    width: 130px;
    height: 467px;
    overflow-y: scroll;
    // overflow-x: hidden;
    scrollbar-color: #888888 #faf6f6; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.el-tree::after) {
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 1500px;
    right: 0;
    top: 0;
    // border-left: 1px solid #e9e9e9;
    // border-right: 1px solid #e9e9e9;
  }
  :deep(.el-tree::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
  }
  :deep(.el-tree::-webkit-scrollbar-thumb) {
    background-color: #d8d8d8;
    // border: 1px dashed #888888;
    width: 4px;
    height: 150px;
  }
  :deep(.el-tree > .el-tree-node) {
    display: inline-block;
    min-width: 100%;
  }
  :deep(.el-tree-node__expand-icon.is-leaf) {
    display: none;
  }
  // :deep(.el-tree-node > div) {
  //   padding-left: 10px;
  // }
}
// 空间查询标题
.detect_box_title {
  text-align: center;
  background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100% no-repeat !important;
  background-position: center -14px;
  height: 48px;
  line-height: 48px;
  // border-bottom: 1px solid #c8fdff;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  // background: #2171ea;
  // border-bottom: 3px solid #32c5ff;
}
// 空间查询盒子
.element_box {
  :deep(.el-input__wrapper) {
    border: 1px solid #409eff;
    height: 30px;
  }
  //  显示表格外框
  :deep(.el-table) {
    border: 1px solid #f1eeff;
    transform: translateX(7px);
    margin-bottom: 15px;
  }
  // 清除表格默认
  :deep(.el-table th) {
    padding: 0;
  }
  :deep(.el-table td) {
    padding: 0;
  }
  // 修改表头颜色
  :deep(.el-table__header-wrapper thead th div) {
    font-size: 13px;
    color: #0000005d;
    height: 23px;
  }
  :deep(.el-table .cell) {
    padding: 0;
  }
}
// 查询栏单行
.element_box_search {
  // background: #d3cbcb;
  height: 60px;
  display: flex;
  padding: 15px;
}
.search {
  width: 30px;
  height: 30px;
  background: #26a1ff;
  border-radius: 5px;
  padding: 6px;
  margin: 0 15px 0 10px;
  cursor: pointer;
}
.search img {
  width: 100%;
  height: 100%;
  transform: translateY(-4px);
}
.delete {
  width: 30px;
  height: 30px;
  background: #26a1ff;
  border-radius: 5px;
  padding: 6px;
  cursor: pointer;
}
.delete img {
  width: 100%;
  height: 100%;
  transform: translateY(-4px);
}
/* 统计信息 */
.title_b2 {
  position: relative;
}
.title_b {
  // display: none;
  color: #0794ff;
  font-weight: 600;
  border-left: 2.5px solid #0794ff;
  height: 14px;
  line-height: 12px;
  padding-left: 6px;
  margin-bottom: 8px;
  transform: translateX(5px);
}
.title_b3 {
  // display: none;
  color: #0794ff;
  font-weight: 600;
  border-left: 2.5px solid #0794ff;
  height: 14px;
  line-height: 12px;
  padding-left: 6px;
  margin-bottom: 8px;
  position: absolute;
  left: 5px;
  top: 10px;
}
</style>
